<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>营业执照</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="page_box bg_color" id="app" style="min-height: 100vh;">
			<div class="bank_cont">
				<ul class="bank_list update_list">
					<li>
						<span>姓名:</span>
						<input type="text" placeholder="输入用户名称" v-model="name" />
					</li>
					<li>
						<span>联系电话:</span>
						<input type="text" placeholder="请输入联系电话" v-model="mobile" />
					</li>
					<li>
						<span>省、市、区:</span>
						<input type="text" placeholder="请选择省市区" v-model="city" id="city" readonly />
					</li>
					<li style="align-items: flex-start;">
						<span>常住地址:</span>
						<textarea v-model="address" placeholder="请输入常住地址"></textarea>
					</li>
				</ul>
				<div class="upload_box">
					<span>营业执照：</span>
					<div class="img_list">
						<ul>
							<li v-if="single_pic">
								<img :src="single_pic" alt="" />
								<div v-if="single_pic" class="close" @click="closeLicense()"><img src="__API__/lib/images/close3.png" alt=""></div>
							</li>
							<li v-else>
								<input type="file" accept="image/*" multiple="multiple"
									@change="changeLicenseImg" /><img src="__API__/lib/images/upload.png" alt="" />
							</li>
						</ul>
					</div>
				</div>
				<div class="upload_box">
					<span>身份证件:</span>
					<div class="img_list">
						<ul>
							<li><input type="file" accept="image/*" multiple="multiple" @change="uploadImg" /><img src="__API__/lib/images/upload.png" alt="" />
							</li>
							<li v-for="(item,i) in multi_pic"><img :src="item" alt="" />
								<div class="close" @click="close(i)"><img src="__API__/lib/images/close3.png" alt=""></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="blue_btn upload_btn" @click="onSubmit()">提交审核</div>
			</div>
		</div>
		<script>
			$(function() {
				var mobileSelect = new MobileSelect({
					trigger: '#city',
					wheels: [{
						data: cityStr
					}],
					ensureBtnText: '确定',
					position: [1],
					callback: function(indexArr, data) {
						$('#city').css('color', '#333');
						app.$data.city = data[0].value + data[1].value + data[2].value;
					}
				});
			})
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					name: '',
					mobile: '',
					city: '',
					address: '',
					multi_pic: [],
					single_pic: ''
				},
				created: function() {
					var that = this;
					common.ajax("{:url('Member/cert_status')}", {token:localStorage.getItem('token')}, function(res) {
						common.showToast(res.msg);
						if (res.code == 200) {


						}
					})
				},
				methods: {
					changeLicenseImg(e) {

						var file = e.target.files[0];
						var reader = new FileReader();
						var that = this;
						reader.readAsDataURL(file);
						console.log(reader)
						reader.onload = function(e) {
							//console.log(file)
							// that.imageList.push(this.result);
							var formData = new FormData();
							formData.append('file', file);
							$.ajax({
								url: "{:url('base/upload_one')}",
								type: "post",
								dataType: "json",
								data: formData,
								async: false,
								cache: false,
								contentType: false,
								processData: false,
								success: function (ret) {
									//$('[name="single_pic"]').val(ret);
									console.log(ret)
									that.single_pic = (ret.img);

								}
							});
						};

					},
					closeLicense(){
						var that = this;
						common.Confirm('是否要删除此照片', ' ', function() {
							that.licenseImg = '';
						})
					},
					uploadImg(e) {

						var file = e.target.files[0];
						var reader = new FileReader();
						var that = this;
						reader.readAsDataURL(file);
						console.log(reader)
						reader.onload = function(e) {
							//console.log(file)
							// that.imageList.push(this.result);
							var formData = new FormData();
							formData.append('file', file);
							$.ajax({
								url: "{:url('base/upload_one')}",
								type: "post",
								dataType: "json",
								data: formData,
								async: false,
								cache: false,
								contentType: false,
								processData: false,
								success: function (ret) {
									//$('[name="single_pic"]').val(ret);
									console.log(ret)
									that.multi_pic.push(ret.img);

								}
							});
						};

					},
					//删除照片
					close: function(i) {
						var that = this;
						common.Confirm('是否要删除此照片', ' ', function() {
							that.imageList.splice(i, 1);
						})
					},
					goDetail(url) {
						common.openUrl(url)
					},
					onSubmit() {
						let that = this;

						let data = {
							token:localStorage.getItem('token'),
							name:that.name,
							mobile:that.mobile,
							city:that.city,
							address:that.address,
							single_pic:that.single_pic,
							multi_pic:that.multi_pic

						}
						if(data.name == ''){
							return common.alert('请输入姓名',' ');
						}
						if(data.mobile == ''){
							return common.alert('请输入电话',' ');
						}
						if(data.city == ''){
							return common.alert('请选择城市',' ');
						}
						if(data.address == ''){
							return common.alert('请输入地址',' ');
						}

						common.ajax("{:url('Member/cert_create')}",data , function(res){
							common.showToast(res.msg);
							if(res.code == 200){
								setTimeout(function() {
									common.PageBack();
								}, 1000)
							}
						})
					}
				}
			});
		</script>
	</body>

</html>
